<template>
  <div>
    <el-dialog
      lock-scroll
      v-model="dialogVisible"
      fullscreen
      title="地图位置选择"
      width="80%"
      top="5vh"
      append-to-body
      class="relative"
      :before-close="handleClose"
    >
      <!-- 仿百度地图官网 -->
      <BMap
        width="100%"
        height="75vh"
        ak="LVTvcupjBjlPmEDPNV2MbkhTXUCKnSQS"
        class="relative"
        enableScrollWheelZoom
        ref="map"
        v-bind="$attrs"
        @initd="handleInitd"
        showControls
        :mapType="mapType"
        @click="handleClick"
        :minZoom="17"
      >
        <div class="w-full box-border px-6 absolute top-13 left-0 z-99999">
          <BAutoComplete
            ref="autoCompleteRef"
            class="w-full p-2 bg-white rounded-lg"
            @confirm="handleAutoCompleteConfirm"
          />
        </div>

        <BZoom :offset="{ x: 22, y: 40 }" />
        <BCityList :offset="{ x: 20, y: 20 }" />
        <BScale anchor="BMAP_ANCHOR_BOTTOM_RIGHT" />
        <BNavigation3d anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :offset="{ x: 10, y: 140 }" />
        <BControl anchor="BMAP_ANCHOR_TOP_RIGHT" :offset="{ x: 20, y: 20 }" class="custom-control">
          <select class="select" name="" id="" v-model="mapType">
            <option value="BMAP_NORMAL_MAP">普通地图</option>
            <option value="BMAP_SATELLITE_MAP">卫星地图</option>
            <option value="BMAP_EARTH_MAP">地球模式</option>
          </select>
        </BControl>
        <BControl
          anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
          :offset="{ x: 22, y: 103 }"
          @click="get"
          class="custom-control location-btn"
        >
          <span class="location-text" v-if="isLoading">定位中..</span>
          <svg
            v-else
            width="16"
            height="16"
            viewBox="0 0 48 48"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M9.85786 32.7574C6.23858 33.8432 4 35.3432 4 37C4 40.3137 12.9543 43 24 43C35.0457 43 44 40.3137 44 37C44 35.3432 41.7614 33.8432 38.1421 32.7574"
              stroke="#666"
              stroke-width="4"
              stroke-linecap="butt"
              stroke-linejoin="round"
            />
            <path
              d="M24 35C24 35 37 26.504 37 16.6818C37 9.67784 31.1797 4 24 4C16.8203 4 11 9.67784 11 16.6818C11 26.504 24 35 24 35Z"
              fill="none"
              stroke="#999"
              stroke-width="4"
              stroke-linejoin="round"
            />
            <path
              d="M24 22C26.7614 22 29 19.7614 29 17C29 14.2386 26.7614 12 24 12C21.2386 12 19 14.2386 19 17C19 19.7614 21.2386 22 24 22Z"
              fill="none"
              stroke="#999"
              stroke-width="4"
              stroke-linejoin="round"
            />
          </svg>
        </BControl>
        <template v-if="!isLoading && !isEmpty">
          <BMarker :position="selfPoint"></BMarker>
          <BLabel
            style="color: #333; font-size: 9px"
            :position="result.point"
            :content="`地址: ${result?.address} 所属商圈:${result?.business} 最匹配地点: ${
              result?.surroundingPois[0]?.title || '无'
            }`"
          />
        </template>
      </BMap>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import {
    BMap,
    BZoom,
    BScale,
    BCityList,
    BNavigation3d,
    BControl,
    BMarker,
    BAutoComplete,
    usePointGeocoder,
    PointGeocoderResult,
    type MapType
  } from 'vue3-baidu-map-gl'
  import { ElDialog, ElButton } from 'element-plus'

  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false
    }
  })

  const emit = defineEmits(['update:modelValue', 'confirm', 'cancel'])

  const dialogVisible = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val)
  })

  const map = ref()

  const { get, result, isLoading, isEmpty } = usePointGeocoder<PointGeocoderResult>({}, (e) => {
    console.log(e)
  })

  const selfPoint = ref({})
  const openPopup = (point) => {
    nextTick(() => {
      selfPoint.value = point
    })
  }

  function handleInitd() {
    get(selfPoint.value)
  }
  function handleClick(e) {
    selfPoint.value = e.latlng
    get(e.latlng)
  }

  const mapType = ref<MapType>('BMAP_NORMAL_MAP')

  const handleClose = () => {
    emit('update:modelValue', false)
  }

  const handleConfirm = () => {
    emit('confirm', result.value)
  }

  const autoCompleteRef = ref()

  function handleAutoCompleteConfirm(e) {
    const value = e.item.value
    selfPoint.value = value.location
    get(value.location)
  }

  const handleCancel = () => {
    emit('cancel')
    handleClose()
  }

  defineExpose({
    openPopup
  })
</script>

<style>
  .location-btn {
    border: none;
    font-size: 12px;
  }

  .custom-control {
    border-radius: 4px;
    display: flex;
    color: #666666;
    background-color: #fff;
    padding: 6px;
    cursor: pointer;
    box-shadow: rgb(0 0 0 / 15%) 1px 2px 1px;
  }

  .select {
    font-size: 12px;
    color: #666666;
    outline: none;
    border-radius: 6px;
    padding: 1px 10px;
    border: none;
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }
  .tangram-suggestion-main {
    z-index: 99999;
  }
</style>
